<template>
	<view class="box bg_f2">
		<view class="hidden" v-if="is_load" style="margin-top: -20px;">
			<image src="../../static/image/user/h@2x.png" class="no_data" v-if="data_list.length === 0"></image>
			
			<view class="content hidden" v-else>
				<view class="list" :class="{'past': item.status !== 1}" v-for="item in data_list" :key="item.id">
					<view class="circle_top bg_f2"></view>
					<view class="circle_bottom bg_f2"></view>
					<image src="../../static/image/user/u@2x.png" v-if="item.status == 3"></image>
					<image src="../../static/image/user/v@2x.png" v-if="item.status == 2"></image>
					<view class="bg_fff list_left">
						<view class="font_35 text_bold coupon_m1 van-multi-ellipsis--l2"
							style="height: 96rpx;padding-right: 120rpx;">{{item.name}}</view>
						<view class="font_23 color_ac">有效期：{{item.validdays_text}}</view>
					</view>
					<view class="list_right color_fff">
						<view class="text_bold">{{item.max_amount}} 元</view>
						<view class="font_27">满{{item.max_price}}元可用</view>
					</view>
				</view>
				<button class="color_fff" style="background-color: #FF6A00;width: 90%;margin-top: 50px;" @click="receive_coupon()">免费领取</button>
			</view>
		</view>
		<view v-else>
			<image src="../../static/image/user/h@2x.png" class="no_data"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				Text: '',
				use: false,
				total_price:0,   // 下单时 点击优惠券 携带的总价格
				data_list: [],
				is_load: false,
				top_tab_active: 1,
				is_last_page: false
			}
		},
		onLoad(e) {
			getApp().get_loading();
			this.getCouponList();

			if(e.total_price){
				this.total_price = e.total_price;
			}
			if (e.use) {
				this.use = true;
			}
		},
		onReachBottom() { //上拉加载
			
		},
		methods: {
			getCouponList() {
				this.$http.get(this.$api.getAllCouponList, {

				}).then(res => {
					this.is_load = true;
					this.data_list = this.data_list.concat(res.data);
					if (this.page == res.data.last_page) {
						this.is_last_page = true;
						this.Text = '已加载全部'
					} else {
						this.is_last_page = false;
					}
				})
			},
			receive_coupon(){
				this.$http.get(this.$api.receiveCoupon, {}).then(res => {
					console.log(res);
					return getApp().get_msg(res.message);
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("/static/css/top.css");

	.box {
		box-sizing: border-box;
		padding: 106rpx 0 0;
	}

	.no_data {
		width: 492rpx;
		height: 414rpx;
		margin: 240rpx auto 0;
	}

	.coupon_m1 {
		margin: 35rpx 0 10rpx;
	}

	.list {
		display: flex;
		// width: 673rpx;
		width: 95%;
		height: 202rpx;
		margin: 0 auto 23rpx;
		overflow: hidden;
		border-radius: 19rpx;
		position: relative;

		&:last-child {
			margin-bottom: 50rpx;
		}

		&.past {
			.list_right {
				background: #FF6A00;
			}

			.list_left {
				view {
					&:first-child {
						color: #FF6A00;
					}
				}
			}

			image {
				top: 0;
				right: 262rpx;
				width: 100rpx;
				height: 77rpx;
				position: absolute;
			}
		}

		.list_left {
			flex: 1;
			height: 100%;
			padding: 0 31rpx;
			box-sizing: border-box;
		}

		.list_right {
			width: 227rpx;
			height: 100%;
			text-align: center;
			background: linear-gradient(270deg, #FF6A00 0%, #EE8332 100%);

			view {
				&:first-child {
					font-size: 62rpx;
					line-height: 83rpx;
					margin: 35rpx 0 12rpx;
				}
			}
		}

		.circle_top,
		.circle_bottom {
			width: 24rpx;
			height: 24rpx;
			right: 215rpx;
			border-radius: 50%;
			position: absolute;
		}

		.circle_top {
			top: -12rpx;
		}

		.circle_bottom {
			bottom: -12rpx;
		}
	}
</style>
